<#include "/admin/common/page.html"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>用户列表 - UnaBoot</title>
    <link rel="stylesheet" href="${una}/admin/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/admin/css/adminlte.min.css">
    <link rel="stylesheet" href="${una}/admin/plugins/layer/skin/default/layer.css"/>
    <link rel="stylesheet" href="${una}/admin/css/unaboot-admin.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini  layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <#include "/admin/common/header.html"/>
    </nav>
    <aside class="main-sidebar sidebar-dark-teal  elevation-4 ">
        <#include "/admin/common/menu.html"/>
    </aside>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h3 class="m-0 text-dark text-lg">用户列表</h3>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <p class="text-gray pull-left">共查询到<span class="text-danger">${data.totalElements!'0'}</span>条符合条件的标签</p>
                                <button type="button" class="btn btn-sm btn-default pull-right ml-2" id="refresh"><i class="fa fa-refresh"></i></button>
                                <button type="button" id="create-user" class="btn btn-sm btn-primary pull-right"><i class="fa fa-plus"></i> 新建账户</button>
                            </div>
                            <div class="card-body">
                                <table class="table table-hover with-border">
                                    <thead class="bg-light">
                                    <tr>
                                        <th>账号</th><th>昵称</th><th>类型</th><th>最后修时间</th><th width="150">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <#if data?? && data.content?size gt 0>
                                        <#list data.content as user>
                                            <tr>
                                                <td>${user.username}</td>
                                                <td>${user.nickname}</td>
                                                <td>
                                                    <#if user.type == 1>
                                                        <small title="系统账户" style="cursor: pointer" class="badge badge-circle badge-danger">S</small>
                                                    <#else>
                                                        <small title="普通账户" style="cursor: pointer" class="badge badge-circle badge-primary">U</small>
                                                    </#if>
                                                </td>
                                                <td>${user.updateTime?string("yyyy-MM-dd HH:mm")}</td>
                                                <td>
                                                    <#if user.type == 1>
                                                        <a href="javascript:void(0);" class="ml-2 text-light disabled"><i class="fa fa-edit"></i></a>
                                                        <a href="javascript:void(0);" class="text-light disabled"><i class="fa fa-trash-o"></i></a>
                                                    <#else>
                                                        <a href="javascript:void(0);" data-id="${user.id}" class="ml-2 edit-user"><i class="fa fa-edit"></i></a>
                                                        <a href="javascript:void(0);" data-id="${user.id}" class="text-red delete-user"><i class="fa fa-trash-o"></i></a>
                                                    </#if>
                                                </td>
                                            </tr>
                                        </#list>
                                    <#else>
                                        <tr><td colspan="5" class="text-center">暂无任何可用数据!</td></tr>
                                    </#if>
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-footer">
                                <nav aria-label="..." class="pull-right">
                                    <@paging una+"/admin/user/index" data 9/>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#include "/admin/common/footer.html"/>
</div>
<script src="${una}/admin/plugins/jquery/jquery.min.js"></script>
<script src="${una}/admin/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="${una}/admin/js/adminlte.min.js"></script>
<script type="text/javascript" src="${una}/admin/plugins/layer/layer.js"></script>
<script src="${una}/admin/js/navigation.js"></script>
<script type="text/javascript">
    $("#create-user").on("click",function(){
       layer.open({
           type:2,
           title:"新增用户",
           shadeClose:false,
           shade:0.4,
           offset:['55px'],
           area:['550px','450px'],
           content:"${una}/admin/user/create",
           resize:false,
           anim:1
       });
    });
    $("#refresh").on("click",function(){
       window.location.reload();
    });
    $(".edit-user").on("click",function(){
       var id = $(this).attr("data-id");
        layer.open({
            type:2,
            title:"编辑用户信息",
            shadeClose:false,
            shade:0.4,
            offset:['55px'],
            area:['550px','450px'],
            content:"${una}/admin/user/"+id,
            resize:false,
            anim:1
        });
    });
    $(".delete-user").on("click",function(){
        var that = $(this);
        var id = $(this).attr("data-id");
        layer.alert("你确定删除该账户吗？",{
            title:'系统提示',
            icon:0,
            btn:['是(Y)','否(N)']
        },function(index){
            var load = layer.load(2,{shade:[0.4,'#f0f0f0f0']});
            $.ajax({
                type:'DELETE',
                url:'${una}/admin/user/'+id,
                success:function(){
                    layer.close(load);
                    layer.close(index);
                    layer.msg("账户已经删除",{icon:1});
                    that.parents('tr').remove();
                },
                error:function(data){
                    layer.close(load);
                    layer.close(index);
                    layer.alert(data.responseText,{title:'系统提示信息',icon:0});
                }
            })
        },function(index){
            layer.close(index);
        });
    });
</script>
</body>
</html>
